<template>
  <div class="add_box">
    <div class="add_header">
      <div class="title" @click="cancelAdd">
        <img src="../../assets/image/back.jpg" class="title_icon" alt="">
        <span class="title_name">返回上一级</span>
      </div>
    </div>
    <div class="add_content">
      <a-form :model="formState" ref="formRef" :rules="rules">
        <a-form-item  label="问题类型" name="qsType">
          <a-select @change="changeQs" v-model:value="formState.qsType" placeholder="请选择问题类型">
            <a-select-option v-for="item in qsTypeList" :key="item.id" :value="item.id">{{item.qsText}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="问题关键词" name="keyWords">
          <div class="check_list">
            <li @click="selectKeyWord(item.qsText)" :class="{'check_active':formState.keyWords.includes(item.qsText)}" class="check_item" v-for="item in gjcList" :key="item.id">{{item.qsText}}</li>
          </div>
        </a-form-item>
        <a-form-item label="问题描述" placeholder="限制300个字符" name="description">
          <a-input v-model:value="formState.description" type="textarea" />
        </a-form-item>
        <a-form-item label="附件" placeholder="限制300个字符" name="files">
          <a-upload accept=".png,.jpeg,.PNG,.JPEG,.mp4" :customRequest="customRequest" list-type="picture-card" :file-list="fileList" @preview="handlePreview" @remove="handerRemove">
            <div v-if="fileList.length < 3">
              <plus-outlined />
            </div>
          </a-upload>
          <p class="tips">可上传问题图片和视频 <br>
            图片大小限制1M，限制3张；视频大小限制3M</p>
        </a-form-item>
        <a-form-item label="联系电话" name="phone">
          <a-input v-model:value="formState.phone" placeholder="选填，方便我们与您联系" />
        </a-form-item>
      </a-form>
    </div>
    <div class="add_footer">
      <a-button @click="submitAdd" type="primary">提交</a-button>
      <a-button @click="cancelAdd" style="margin-left: 10px">取消</a-button>
    </div>
  </div>
</template>

<script>
import { RollbackOutlined, PlusOutlined } from '@ant-design/icons-vue';
import column from "./js/column"
import api from '@/api/problem'
import { message } from 'ant-design-vue';
export default {
  components: {
    RollbackOutlined,
    PlusOutlined
  },
  data() {
    return {
      // 表单
      formState: {
        qsType: "",
        keyWords: [],
        description: "",
        phone: '',
        system: "1",
        files: []
      },
      previewVisible:false,
      previewTitle:'',
      rules: column.addRules,//规则
      fileList: [],//文件列表
      // 问题类型
      qsTypeList: [],
      // 关键词
      gjcList: [],
    }
  },
  mounted() {
    this.getSelect();
  },
  methods: {
    // 选择关键词
    selectKeyWord(val) {
      this.formState.keyWords.find(item => item == val) ? this.formState.keyWords = this.formState.keyWords.filter(item => item != val) : this.formState.keyWords.push(val);
    },
    // 获取问题类型
    getSelect() {
      api.getQsDictionary({ type: "0", pageSize: 999, pageIndex: 1, system: "1" }).then(res => {
        this.qsTypeList = res.data.list;
        this.formState.qsType = this.qsTypeList[0].id;
        this.changeQs()
      })
    },
    // 根据问题类型查询关键词
    changeQs() {
      this.formState.keyWords = [];
      api.getKeyWordsByTypeId({id:this.formState.qsType}).then(res => {
        if (res.code == 200) {
          console.log(res)
          this.gjcList = res.data;
        }
      })
    },
    // 重置
    reset() {
      this.$refs.formRef.resetFields();
      this.fileList = [];
    },
    //删除
    handerRemove(info){
      this.fileList = this.fileList.filter(item=>item.uid !== info.uid)
      this.formState.files = this.formState.files.filter(item=>item.uid !== info.uid)
    },
    //预览
    handlePreview(file){
      console.log(file)
      this.previewTitle = file.name
      this.previewImage = file.url
      this.previewVisible = true
    },
    //关闭预览
    handleCancel(){
      this.previewVisible = false
    },
    //覆盖上传
    async customRequest(info){
        let formData = new FormData();
        formData.append("file", info.file);
        await api.uploadFile(formData).then(res => {
          const resp = res.data
          if (resp.code == '200') {
            message.success('上传成功');
            this.formState.files.push({
              uid: info.file.uid,
              fileName: resp.data.fileName,
              filePath: resp.data.filePath,
              fileType: resp.data.fileType
            })
            this.fileList.push({
              uid: info.file.uid,
              name: resp.data.fileName,
              status: 'done',
              url: resp.data.filePath
            })
          }
        })
    },
    // 提交
    submitAdd() {
      this.$refs.formRef
        .validate()
        .then(() => {
          console.log({ ...this.formState, keyWords: this.formState.keyWords.toString() })
          api.addProblem({ ...this.formState, keyWords: this.formState.keyWords.toString() }).then(res => {
            console.log(1111111,res)
            if (res.code == 200) {
              message.success('添加成功');
              this.reset();
              this.$router.go(-1);
            }
          })
        })
        .catch((error) => {
          console.log('error', error);
        });
    },
    // 取消
    cancelAdd() {
      this.reset();
      this.$router.go(-1);
    },

  }
}
</script>
<style lang="scss" scope>
@import "./css/add.scss";
</style>